<script setup>
const props = defineProps({
  isShow: {
    type: Boolean,
    defalut: false
  },
  // 关结数据id'
  id: {
    type: String || Number,
    defalut: ''
  }
})
const emit = defineEmits(['submit', 'close'])

const ruleFormRef = ref(null)
const { proxy } = getCurrentInstance()
// 表单字段
const ruleForm = reactive({
  closeReason: '', // 请输入关结原因
  id: ''
})
// 校验
const rules = reactive({
  closeReason: [{ required: true, message: '请输入关结原因', trigger: 'change' }]
})

// 提交
const submit = async () => {
  ruleFormRef.value.validate(async (valid, fields) => {
    if (!valid) {
      proxy.warningMsg('请填写完整')
      return
    }
    if (!props.id) return proxy.warningMsg('请传入id')
    const MesBox = await proxy.MessageBox('确认关结改数据？')
    if (!MesBox) return
    ruleForm.id = props.id

    emit('submit', ruleForm)
  })
}
watch(
  () => props.isShow,
  () => {
    ruleForm.closeReason = ''
  }
)
defineExpose({ submit })
</script>

<template>
  <div>
    <p-XiaoheDialog :dialogVisible="props.isShow" title="关结原因" @close="emit('close')" width="30%">
      <template #body>
        <el-form
          ref="ruleFormRef"
          :model="ruleForm"
          :rules="rules"
          label-width="90px"
          class="demo-ruleForm"
          status-icon
        >
          <el-form-item label="关结原因" prop="closeReason">
            <el-input
              autosize
              clearable
              v-model="ruleForm.closeReason"
              :rows="3"
              type="textarea"
              placeholder="请输入内容"
              :input-style="{ width: '100%' }"
            />
          </el-form-item>
        </el-form>
        <div style="width: 100%">
          <div class="Btn" v-if="title !== '查看'">
            <el-button type="primary" :loading="Btnloading" @click="submit">保存</el-button>
            <el-button type="inof" @click="emit('close')">取消</el-button>
          </div>
        </div>
      </template>
    </p-XiaoheDialog>
  </div>
</template>

<style lang="scss" scoped></style>
